<template>
  <div>
    <a-card :bordered="false" v-show="!hiddenSearch">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="5" :sm="12">
              <a-form-item label="角色名称">
                <a-input placeholder="请输入"/>
              </a-form-item>
            </a-col>
            <a-col :md="5" :sm="12">
              <a-form-item label="状态">
                <a-select v-model="queryParam.status" placeholder="请选择" default-value="0">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option value="true">启用</a-select-option>
                  <a-select-option value="false">锁定</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-tooltip placement="topLeft" title="查询" arrow-point-at-center>
                  <a-button shape="circle" icon="search" @click="$refs.table.refresh(true)"/>
                </a-tooltip>
                <a-tooltip placement="topLeft" title="重置" arrow-point-at-center>
                  <a-button style="margin-left: 8px" @click="() => this.queryParam = {}" icon="sync"/>
                </a-tooltip>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card
      style="margin-top: 10px"
      :bordered="false">
      <div class="table-operator">
        <a-tooltip placement="topLeft" title="隐藏/显示搜索栏" arrow-point-at-center>
          <a-button size="small" style="position: absolute;right: 55px;top: 30px;" shape="circle" :icon="icon" @click="hiddenSearchMenu(hiddenSearch)"/>
        </a-tooltip>
        <a-button v-show="roleAddEnable" type="primary" shape="round" icon="plus-circle" @click="$refs.drawer.add()">添加</a-button>
        <a-button v-show="roleDelEnable && selectedRowKeys.length > 0" type="danger" shape="round" icon="delete" @click="onClick(selectedRowKeys)">删除</a-button>
      </div>

      <s-table
        ref="table"
        row-key="id"
        size="middle"
        :columns="columns"
        :data="loadData"
        :rowSelection="roleDelEnable ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange} : null"
        showPagination="auto"
        :showTotal="true"
      >
        <span slot="dataScope" slot-scope="text">
          <a-badge :color="text | statusTypeFilter" :text="text | statusFilter"/>
        </span>
        <span slot="status" slot-scope="text, record">
          <a-switch :disabled="!roleEditEnable || record.roleCode === 'admin'" :checked="text" @change="changeRoleStatus(record,!text)">
            <a-icon slot="checkedChildren" type="unlock"/>
            <a-icon slot="unCheckedChildren" type="lock" />
          </a-switch>
        </span>
        <span slot="customRoleCodeTitle"><a-icon type="idcard" :style="{ fontSize: '16px', color: '#4F99FF' }"/>  唯一标示</span>
        <span slot="customRoleNameTitle"><a-icon type="team" :style="{ fontSize: '16px', color: '#4F99FF' }"/>  角色名称</span>
        <span slot="customStatusTitle"><a-icon type="lock" theme="twoTone"/>  状态</span>
        <span slot="customDataScopeTitle"><a-icon type="eye" :style="{ fontSize: '16px', color: '#4F99FF' }"/>  权限范围</span>
        <span slot="customCreateTimeTitle"><a-icon type="clock-circle" theme="twoTone"/>  创建时间</span>
        <span slot="customRoleSortTitle"><a-icon type="sort-descending" :style="{ fontSize: '16px', color: '#4F99FF' }"/>  排序</span>
        <span slot="customActionTitle"><a-icon type="form" :style="{ fontSize: '16px', color: '#4F99FF' }"/>  操作</span>
        <div
          slot="expandedRowRender"
          slot-scope="record"
          style="margin: 3px">
          <a-row
            :gutter="24"
            :style="{ marginBottom: '12px' }">
            <a-col :span="12" v-for="(role, index) in record.permissions" :key="index" :style="{ marginBottom: '8px' }">
              <a-col :span="4" style="padding-left: 3px; padding-right: 12px;">
                <span>{{ role.permissionName }}：</span>
              </a-col>
              <a-col :span="18" v-if="role.actions.length > 0" style="padding-left: 0; padding-right: 12px;">
                <a-tag color="cyan" v-for="(action, k) in role.actions" :key="k">{{ action.actionName }}</a-tag>
              </a-col>
              <a-col :span="20" style="padding-left: 0; padding-right: 12px;" v-else><a-tag color="#cacaca">未配置按钮权限</a-tag></a-col>
            </a-col>
          </a-row>
        </div>
        <span slot="action" slot-scope="text, record">
          <a-dropdown :trigger="['click']">
            <a-menu slot="overlay" v-if="roleEditEnable || roleDelEnable || rolePerEnable">
              <a-menu-item v-show="rolePerEnable"><a @click="$refs.permission.setting(record)"><a-icon type="setting" theme="filled"/> 菜单权限</a></a-menu-item>
              <a-menu-item v-show="roleEditEnable"><a @click="$refs.drawer.edit(record)"><a-icon type="edit" theme="filled"/> 编辑</a></a-menu-item>
              <a-menu-item v-show="roleDelEnable"><a @click="onClick([record.id])"><a-icon type="delete" theme="filled"/> 删除</a></a-menu-item>
            </a-menu>
            <a> <a-button type="dashed" icon="bars"/></a>
          </a-dropdown>
        </span>
      </s-table>
      <role-modal ref="drawer" @ok="handleOk"/>
      <permission-modal ref="permission" @ok="handleOk"/>
    </a-card>
  </div>
</template>

<script>
import { STable } from '@/components'
import { roleList, changeRoleStatus, delRole } from '@/api/system'
import { checkPermission } from '@/utils/permissions'
import message from 'ant-design-vue/es/message'
import RoleModal from '../modules/RoleModal'
import PermissionModal from '../modules/PermissionModal'

const statusMap = {
    1: {
      color: 'green',
      text: '全部数据权限'
    },
    2: {
      color: 'geekblue',
      text: '自定义数据权限'
    },
    3: {
      color: 'volcano',
      text: '本部门数据权限'
    },
    4: {
      color: 'gold',
      text: '本部门及以下权限'
    },
    5: {
      color: 'gold',
      text: '仅本人数据权限'
    }
  }
export default {
  name: 'RoleList',
  components: {
    PermissionModal,
    STable,
    roleList,
    RoleModal
  },
  data () {
    return {
      visible: false,

      form: null,
      mdl: {},

      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      selectedRowKeys: [],
      selectedRows: [],
      roleAddEnable: checkPermission('system:role:add'),
      roleDelEnable: checkPermission('system:role:remove'),
      roleEditEnable: checkPermission('system:role:edit'),
      rolePerEnable: checkPermission('system:role:permission'),
      hiddenSearch: false,
      icon: 'eye-invisible',
      // 表头
      columns: [
        {
          dataIndex: 'roleCode',
          align: 'center',
          width: 120,
          slots: { title: 'customRoleCodeTitle' }
        },
        {
          dataIndex: 'roleName',
          slots: { title: 'customRoleNameTitle' },
          align: 'center',
          width: 120
        },
        {
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' },
          align: 'center',
          width: 100,
          slots: { title: 'customStatusTitle' }
        },
        {
          dataIndex: 'dataScope',
          scopedSlots: { customRender: 'dataScope' },
          align: 'center',
          width: 180,
          slots: { title: 'customDataScopeTitle' }
        },
        {
          dataIndex: 'roleSort',
          align: 'center',
          width: 100,
          sorter: true,
          slots: { title: 'customRoleSortTitle' }
        },
        {
          dataIndex: 'createTime',
          sorter: true,
          align: 'center',
          width: 200,
          slots: { title: 'customCreateTimeTitle' }
        }, {
          width: 100,
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          slots: { title: 'customActionTitle' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return roleList(requestParameters)
          .then(res => {
            return res.data
          })
      }
    }
  },
  created () {},
  filters: {
    statusFilter (type) {
      return statusMap[type].text
    },
    statusTypeFilter (type) {
      return statusMap[type].color
    }
  },
  methods: {
    hiddenSearchMenu (hiddenSearch) {
      this.hiddenSearch = hiddenSearch !== true
      this.icon = this.hiddenSearch === true ? 'eye' : 'eye-invisible'
    },
    handleOk () {
      this.$refs.table.refresh()
    },
    async changeRoleStatus (record, checked) {
      await changeRoleStatus({ id: record.id, status: checked }).then(res => {
        this.$refs.table.refresh()
        if (checked) {
          message.success('启用角色成功')
        } else {
          message.success('禁用角色成功')
        }
      })
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    onClick (ids) {
      const self = this
      this.$confirm({
        title: '你确定删除该角色吗?',
        content: h => <div style="color:red;">角色删除将永久不能恢复</div>,
        onOk () {
          delRole(ids).then(res => {
            self.$refs.table.refresh()
            message.success('删除角色成功')
            self.selectedRowKeys = []
          })
        },
        onCancel () {
          self.selectedRowKeys = []
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
